<template>
    <div>
      <header-tilte :title="title"></header-tilte>
      <loading v-if="isShowLoading"></loading>
      <div class="refer_content flex_center" v-if="!isShowLoading">
        <div class="qr_img_base flex_center flex_column">
          <div style="width: 256px;height: 256px">
            <img style="width: 100%;height: 100%" id="qrcode" :src="url">
          </div>
          <p>长按识别二维码</p>
          <p>关注公众号</p>
        </div>
        <!--<div id="qrcode"></div>-->
      </div>
    </div>
</template>

<script>
    import HeaderTilte from "../../components/headerTilte";
    import Loading from "../../components/loading";

    export default {
      data(){
        return{
          isShowLoading:true,
          title:'二维码推广',
          mid:'',
          url:''
        }
      },
      components: {
        Loading,
        HeaderTilte
      },
      name: "refer",
      mounted(){
        this.mid = this.$route.query.mid;
        if(!this.isEmpty(this.mid)){
          this.initQrcode();
        }else {
          history.go(-1)
        }
      },
      methods: {
        initQrcode() {
          var _self = this;
          this.yesS.commissionQr(
            {mid: parseInt(_self.mid)}
          ).then(res => {

            this.url = res.data.qr;
            this.isShowLoading = false
            this.$toast.success('请求成功，二维码有效期30天')
          })
        }
      },
    }
</script>

<style scoped>
  @import "css/refer.css";
  /*@import 'http://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css';*/
</style>
